<template>
  <Dialog v-model="dialogVisible" title="趋势分析" width="1200px">
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="6">
        <el-select v-model="queryParams.timeRange" placeholder="选择时间范围">
          <el-option label="最近7天" value="7days" />
          <el-option label="最近30天" value="30days" />
          <el-option label="最近3个月" value="3months" />
          <el-option label="最近6个月" value="6months" />
          <el-option label="最近1年" value="1year" />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="queryParams.professionId" placeholder="选择职业" clearable>
          <el-option label="全部职业" value="" />
          <el-option label="电工" value="1" />
          <el-option label="焊工" value="2" />
          <el-option label="车工" value="3" />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="queryParams.skillLevel" placeholder="选择等级" clearable>
          <el-option label="全部等级" value="" />
          <el-option label="初级" value="1" />
          <el-option label="中级" value="2" />
          <el-option label="高级" value="3" />
          <el-option label="技师" value="4" />
          <el-option label="高级技师" value="5" />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="refreshData">查询</el-button>
        <el-button @click="exportChart">导出</el-button>
      </el-col>
    </el-row>
    
    <el-tabs v-model="activeTab" type="card">
      <!-- 报名趋势 -->
      <el-tab-pane label="报名趋势" name="registration">
        <el-card>
          <div ref="registrationChartRef" style="height: 400px;"></div>
        </el-card>
      </el-tab-pane>
      
      <!-- 通过率趋势 -->
      <el-tab-pane label="通过率趋势" name="passRate">
        <el-card>
          <div ref="passRateChartRef" style="height: 400px;"></div>
        </el-card>
      </el-tab-pane>
      
      <!-- 成绩趋势 -->
      <el-tab-pane label="成绩趋势" name="score">
        <el-card>
          <div ref="scoreChartRef" style="height: 400px;"></div>
        </el-card>
      </el-tab-pane>
      
      <!-- 数据对比 -->
      <el-tab-pane label="数据对比" name="compare">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card title="职业对比">
              <div ref="professionCompareRef" style="height: 350px;"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card title="等级对比">
              <div ref="levelCompareRef" style="height: 350px;"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    
    <!-- 趋势数据表格 -->
    <el-divider content-position="left">详细数据</el-divider>
    <el-table :data="trendData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="120" />
      <el-table-column prop="registrationCount" label="报名人数" width="100" />
      <el-table-column prop="examCount" label="参考人数" width="100" />
      <el-table-column prop="passedCount" label="通过人数" width="100" />
      <el-table-column prop="passRate" label="通过率" width="100">
        <template #default="{ row }">{{ row.passRate }}%</template>
      </el-table-column>
      <el-table-column prop="averageScore" label="平均分" width="100" />
      <el-table-column prop="theoryAverage" label="理论平均分" width="120" />
      <el-table-column prop="practiceAverage" label="实操平均分" width="120" />
    </el-table>
    
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, nextTick, watch } from 'vue'

const dialogVisible = ref(false)
const activeTab = ref('registration')
const queryParams = ref({
  timeRange: '30days',
  professionId: '',
  skillLevel: ''
})

const registrationChartRef = ref()
const passRateChartRef = ref()
const scoreChartRef = ref()
const professionCompareRef = ref()
const levelCompareRef = ref()

const trendData = ref([
  {
    date: '2023-12-01',
    registrationCount: 120,
    examCount: 118,
    passedCount: 95,
    passRate: 80.5,
    averageScore: 78.5,
    theoryAverage: 80.2,
    practiceAverage: 76.8
  },
  {
    date: '2023-12-02',
    registrationCount: 135,
    examCount: 132,
    passedCount: 108,
    passRate: 81.8,
    averageScore: 79.2,
    theoryAverage: 81.1,
    practiceAverage: 77.3
  }
  // 更多模拟数据...
])

const initCharts = () => {
  // TODO: 使用 ECharts 初始化图表
  nextTick(() => {
    console.log('初始化趋势分析图表')
    initRegistrationChart()
    initPassRateChart()
    initScoreChart()
    initCompareCharts()
  })
}

const initRegistrationChart = () => {
  // TODO: 初始化报名趋势图表
  console.log('初始化报名趋势图表')
}

const initPassRateChart = () => {
  // TODO: 初始化通过率趋势图表
  console.log('初始化通过率趋势图表')
}

const initScoreChart = () => {
  // TODO: 初始化成绩趋势图表
  console.log('初始化成绩趋势图表')
}

const initCompareCharts = () => {
  // TODO: 初始化对比图表
  console.log('初始化对比图表')
}

const refreshData = () => {
  // TODO: 根据查询条件刷新数据
  console.log('刷新趋势数据:', queryParams.value)
  initCharts()
}

const exportChart = () => {
  // TODO: 导出图表数据
  console.log('导出趋势分析图表')
}

// 监听tab切换
watch(activeTab, (newTab) => {
  nextTick(() => {
    switch (newTab) {
      case 'registration':
        initRegistrationChart()
        break
      case 'passRate':
        initPassRateChart()
        break
      case 'score':
        initScoreChart()
        break
      case 'compare':
        initCompareCharts()
        break
    }
  })
})

const open = () => {
  dialogVisible.value = true
  nextTick(() => {
    initCharts()
  })
}

defineExpose({ open })
</script> 